import QtQuick

Item{
    anchors.fill: parent

    PullListViewV1{
        id: listView
        anchors.fill: parent
        model: listModel
        delegate: Item {
            id: name
            height: 40
            width: listView.width

            Rectangle{
                anchors.fill: parent
                anchors.margins: 4
                color: "red"
                radius: 4
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 6
                    anchors.left: parent.left
                    text: "行:" + index
                }
            }
        }


        Component{
            id: cmpHeader
            Rectangle{
                color: "yellow"
                width: listView.width
                height: 16
                Text{
                    anchors.centerIn: parent
                    text: listView.headerText
                }
            }
        }

        onHeaderTextChanged: console.log("headText:",headerText)
        onFooterTextChanged: console.log("footerText:",footerText)
        onHeaderStateChanged: {
            switch(headerState){
            case PullListViewV1.Hide:{
                listView.header = null
            }break;
            case PullListViewV1.Display:{
                headerText = "刷新"
                listView.header = cmpHeader
            }break;
            case PullListViewV1.Runing:{
                headerText = "正在刷新..."
                //@TODO 开始刷新
                timerRefresh.start()
            }break;
            case PullListViewV1.Complete:{
                headerText = "刷新完成"
            }break;
            default:break;
            }
        }

        Component{
            id: cmpFooter
            Rectangle{
                color: "yellow"
                width: listView.width
                height: 16
                Text{
                    anchors.centerIn: parent
                    text: listView.footerText
                }
            }
        }
        onFooterStateChanged: {
            switch(footerState){
            case PullListViewV1.Hide:{
                listView.footer = null
            }break;
            case PullListViewV1.Display:{
                footerText = "加载更多"
                listView.footer = cmpFooter
            }break;
            case PullListViewV1.Runing:{
                footerText = "加载中..."
                timerLoadMore.start()
            }break;
            case PullListViewV1.Complete:{
                footerText = "加载完成"
            }break;
            default:break;
            }
        }
    }


    //刷新
    Timer{
        id: timerRefresh
        interval: 1000
        onTriggered: {
            console.log("刷新完成")
            listModel.refresh()
            listView.headerState = PullListViewV1.Complete
            timerHideRefresh.start()
        }
    }

    Timer{
        id: timerHideRefresh
        interval: 1000
        onTriggered: {
            console.log("刷新结束")
            listView.headerState = PullListViewV1.Hide
        }
    }


    //加载
    Timer{
        id: timerLoadMore
        interval: 1000
        onTriggered: {
            console.log("加载完成")
            listModel.loadMore()
            listView.footerState = PullListViewV1.Complete
            timerHideLoadMore.start()
        }
    }

    Timer{
        id: timerHideLoadMore
        interval: 1000
        onTriggered: {
            console.log("加载结束")
            listView.footerState = PullListViewV1.Hide
        }
    }

    ListModel{
        id: listModel

        function refresh(){
            listModel.clear()
            for(var i = 0; i < 10; i ++){
                listModel.append({name:listModel.count + 1})
            }
        }
        function loadMore(){
            for(var i = 0; i < 5; i ++){
                listModel.append({name:listModel.count + 1})
            }
        }

        function canLoadMore(){
            return count > 30 ? false : true;
        }

        Component.onCompleted: refresh()
    }

//        //debug
//        Column{
//            anchors.centerIn: parent
//            width: parent.width

//            Text{
//                text: "contentY:" + listView.contentY
//            }
//            Text{
//                text: "originY:" + listView.originY
//            }
//            Text{
//                text: "atYBeginning:" + listView.atYBeginning
//            }
//            Text{
//                text: "atYEnd:" + listView.atYEnd
//            }

//            Text{
//                text: "moving:" + listView.moving
//            }

//            Text{
//                text: "moveDirection:" + listView.moveDirection
//            }
//        }
}
